<template>
    <div class="service flex-sb">
        <div class="menu">
            <div class="menu-item" :class="{ 'menu-item-avatar': paramsPath == 'index' }" @click="go('index')">
                店铺首页
            </div>
            <div class="menu-item" :class="{ 'menu-item-avatar': paramsPath == 'ordermanage' }"
                @click="go('ordermanage')">
                订单管理
            </div>
            <div class="menu-item" @click="goPath('/service/productrelease')">
                发布商品
            </div>
            <div class="menu-item" :class="{ 'menu-item-avatar': paramsPath == 'goodsmanage' }"
                @click="go('goodsmanage')">
                管理商品
            </div>
            <!-- <div
        class="menu-item"
        :class="{ 'menu-item-avatar': paramsPath == 'AccountMoney' }"
        @click="go('AccountMoney')"
      >
        账户资金
      </div> -->
            <div class="menu-item" :class="{ 'menu-item-avatar': paramsPath == 'companysettings' }"
                @click="go('companysettings')">
                店铺资料
            </div>
            <div class="menu-item" :class="{ 'menu-item-avatar': paramsPath == 'remindnews' }"
                @click="go('remindnews')">
                消息提醒
            </div>
            <div class="menu-item" :class="{ 'menu-item-avatar': paramsPath == 'bond' }" @click="go('bond')">
                保证金管理
            </div>
        </div>
        <div class="con">
            <div :is="paramsPath"></div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

import index from "@/components/service/Index.vue";
import goodsmanage from "@/components/service/GoodsManage.vue";
import ordermanage from "@/components/service/OrderManage.vue";
import remindnews from "@/components/service/RemindNews.vue";
import companysettings from "@/components/service/CompanySettings.vue";
import bond from "@/components/service/bond.vue";
// import AccountMoney from "@/components/service/AccountMoney.vue";
export default {
    components: {
        index,
        goodsmanage,
        remindnews,
        ordermanage,
        companysettings,
        bond
    },

    head() {
        return {
            title: "商家中心-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,商家中心",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            paramsPath: "",
        };
    },
    beforeDestroy() { },
    beforeMount() { },
    mounted() {
        if (this.$route.params.path) this.paramsPath = this.$route.params.path;
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {
        $route(to, from) {
            try {
                if (window) {
                    if (to.params.path) this.paramsPath = to.params.path;
                }
            } catch (error) { }
        },
    },
    methods: {
        goPath(path) {
            let pathList = [
                'ordermanage',
                '/service/productrelease',
                'goodsmanage',
                'companysettings',
            ]

            if (this.userInfo.service_info.type == 6 && pathList.includes(path)) {
                this.$confirm('个人服务商无法生成店铺，请升级成为企业服务商。', '温馨提示', {
                    confirmButtonText: '去升级',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$router.push({
                        path: '/service/applyservice'
                    })
                }).catch(() => {

                });
                return
            }
            this.$router.push({
                path: path,
            });
        },
        go(path) {
            let pathList = [
                'ordermanage',
                '/service/productrelease',
                'goodsmanage',
                'companysettings',
            ]

            if (this.userInfo.service_info.type == 6 && pathList.includes(path)) {
                this.$confirm('个人服务商无法生成店铺，请升级成为企业服务商。', '温馨提示', {
                    confirmButtonText: '去升级',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$router.push({
                        path: '/service/applyservice'
                    })
                }).catch(() => {

                });
                return
            }
            this.$router.push({
                path: "/service/servicecenter/" + path,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.service {
    align-items: flex-start;
    width: 1200px;
    margin: 19px auto;
    min-height: 620px;
}

.menu {
    background-color: #ffffff;
    width: 185px;
    padding: 18px 0;

    .menu-item {
        border-left: 3px solid #ffffff;
        font-size: 15px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        height: 50px;
        line-height: 50px;
        padding-left: 28px;
        box-sizing: border-box;
        cursor: pointer;

        &:hover {
            background-color: #ededed;
            border-left-color: #ededed;
        }
    }

    .menu-item-avatar {
        border-left-color: #9b9b9b !important;
        background-color: #ededed;
    }
}

.con {
    width: 999px;
}
</style>